import {Component, Input, OnInit, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {ProjectItemModel} from "../../model/project-item.model";
import {BookingHouseModalViewComponent} from "../booking-house-modal-view/booking-house-modal-view.component";
import {LayoutTypeModalViewComponent} from "../layout-type-modal-view/layout-type-modal-view.component";
import {LocalStorage} from "../../app.local-storage";
import {APARTMENT} from "../../service/apartment.service";
import {CONSTANT} from "../../service/constant.service";
import {TitleCpt} from "../../lib/title/title.component";
import {ROUTE} from "../../service/route.service";


@Component({
  selector: 'app-project-detail-view',
  templateUrl: './project-detail-view.component.html',
  styleUrls: ['./project-detail-view.component.scss']
})
export class ProjectDetailViewComponent implements OnInit {
  @ViewChild(BookingHouseModalViewComponent) bookingModal:any;
  @ViewChild(LayoutTypeModalViewComponent) layoutModal:any;
  productInfo:any = {};
  banners = []
  mulitSwiperOptions:any = {
    leftArrow: 'url(assets/images/index_left2.png)',
    rightArrow: 'url(assets/images/index_right2.png)',
    textOnImg: true,
    textOnImgFilter: 'rgba(255,255,255,0.4)',
    multiNum: 3,
    imagePadding: 6
  };
  multiSwiperList:any = [
    {img: 'assets/images/home-banner1.jpg', title: 'Loft 一房一厅'},
    {img: 'assets/images/home-banner1.jpg', title: 'Loft 一房一厅'},
    {img: 'assets/images/home-banner1.jpg', title: '两房一厅'}
  ];
  layoutList:any = [];
  apartmentId:number;
  @Input('project') item:ProjectItemModel = new ProjectItemModel();
  search:any;

  projectDetailTitleCptList:Array<TitleCpt> = this.constant.genProjectDetailTitleCptList();

  constructor(private routeInfo:ActivatedRoute,
              private apartment:APARTMENT,
              private ls:LocalStorage,
              private constant:CONSTANT,
              private route:ROUTE) {
    this.routeInfo.params.subscribe(params => {
      this.apartmentId = params['id'];
    });
  }

  ngOnInit() {
    this.search = {location: '上海宝山区', type: '交通设施服务'};
    this.loadProductDetail();
    this.loadLayoutList();
  }

  loadProductDetail() {
    let departmentId = this.apartmentId
    this.apartment.getDetial(departmentId, (res:any)=> {
      this.productInfo = res;
      this.banners = []
      for (let v of this.productInfo.banner){
        let item = {img:v.url}
        this.banners.push(item)
      }
      this.search = {location: this.productInfo.address};
    })
  }

  loadLayoutList() {
    this.apartment.getLayoutList(this.apartmentId, (res:any)=> {
      let list:any = [];
      // console.log(res);
      for (let item of res) {
        let data:any = {
          apartmentId: item.apartmentId,
          id: item.id,
          img: item.thumb,
          title: item.name
        };
        list.push(data);
      }
      this.layoutList = list;
      // console.log(this.layoutList);
      if (list.length > 0) {
        this.multiSwiperList = list;
      }
    });
  }

  showLayoutModal(item:any) {
    this.layoutModal.showModal(item);
  }


  goToRentingView(item:any) {
    if (item) {
      this.route.gotoRenting(item);
    }
  }

  showBookingModal() {
    // console.log(this.bookingModal);
    this.bookingModal.showModal();
  }

  closeModal(result:Object) {
    this.bookingModal.onHidden();
  }

  closeLayoutModal(result:Object) {
    this.layoutModal.onHidden();
  }
}
